<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            /* margin: 0; */
            padding: 0;

        }

        #box {
            width: 500px;
            height: 500px;
            background-color: rgba(44, 148, 207, 0.3);
            margin: auto;
            margin-top: 5em;
        }

        div {
            margin-bottom: 50px;
        }

        ol {
            list-style: none;
            display: flex;
        }

        li {
            width: 30px;
            height: 30px;
            /* background-color: crimson; */
            border-radius: 50%;
            margin-left: 10px;
            text-align: center;
            line-height: 30px;
            color: #fff;
        }

        #cunputer,
        #lucky,
        #result {
            display: flex;
        }



        #result_p {
            width: 300px;
            border-radius: 0;
            background-color: transparent;
            line-height: 32px;
        }
    </style>
</head>

<body>
    <div id='box'>
        <div id="cunputer">
            <h3>机选号码</h3>
            <ol></ol>
        </div>
        <div id="lucky">
            <h3>自选号码</h3>
            <ol></ol>
        </div>
        <div id="result">
            <h3>结果</h3>
            <p id="result_p"></p>
        </div>
    </div>
    <script>
        let cunputer = document.querySelectorAll('ol')[0];
        let lucky = document.querySelectorAll('ol')[1];
        let result = document.getElementById('result_p');
        //随机数函数
        function random(min, max) {
            if (!max) {
                [max, min] = [min, 0];
            }
            let number = parseInt(Math.random(min, max) * (max - min + 1) + min);
            return number;
        }

        function technology() {
            let s = new Set();
            while (s.size < 6) {
                s.add(random(1, 33));
            }
            let redball = [...s].sort((a, b) => a - b);
            let blueball = random(1, 16);
            return [redball, blueball];
        }
        let [cunputerredball, cunputerblueball] = technology();
        let [luckyredball, luckyblueball] = technology();

        function rende(arr, number, ele) {
            let x = arr.map(item => `<li style='background-color:red'>${item}</li>`).join('');
            ele.innerHTML += x;
            ele.innerHTML += `<li style='background-color:blue'>${number}</li>`;

        }
        rende(cunputerredball, cunputerblueball, cunputer)
        rende(luckyredball, luckyblueball, lucky)

        let ballresult = luckyredball.filter(function (item) {
            return cunputerredball.indexOf(item) != -1;
        }).length;
        console.log(ballresult);

        if (result == 6 && cunputerblueball == luckyblueball) {
            console.log('这辈子不愁了');
            result.innerText = '这辈子不愁了'
        } else if (result == 6) {
            console.log('半辈子不愁');
            result.innerText = '半辈子不愁'
        } else if (result == 5 && cunputerblueball == luckyblueball) {
            console.log('3000元，一个月工资了');
            result.innerText = '3000元，一个月工资了'
        } else if (result == 5 || result == 4 && cunputerblueball == luckyblueball) {
            console.log('吃顿饭￥200');
            result.innerText = '吃顿饭￥200'
        } else if (result == 4 || result == 3 && cunputerblueball == luckyblueball) {
            console.log('小奖励￥10，请继续');
            result.innerText = '小奖励￥10，请继续'
        } else if (result == 2 && cunputerblueball == luckyblueball || result == 1 && cunputerblueball ==
            luckyblueball ||
            cunputerblueball == luckyblueball) {
            console.log('六等奖（微笑）');
            result.innerText = '六等奖（微笑）'
        } else {
            console.log('哭死你');
            result.innerText = '哭死你'
        }
    </script>
</body>

</html>